<template>
    <div class="main-container">
        <div class="main-header">
            <div class="main-header-function">
                <div>
                    <label>WebHook工具</label>
                </div>
                <div>
                    <el-button
                            type="primary"
                            size="medium"
                            icon="el-icon-circle-plus-outline"
                            @click="dialog.importTools.visible = true"
                    >导入工具</el-button>
                </div>
            </div>
        </div>

        <div class="main-body">
            <el-table
                    border
                    fit
                    highlight-current-row
                    :data="table.tools"
            >
                <el-table-column
                        prop="groupName"
                        width="100"
                        label="工具组">
                </el-table-column>
                <el-table-column
                        prop="servers"
                        :show-overflow-tooltip="true"
                        label="服务地址">
                </el-table-column>
                <el-table-column
                        prop="headers"
                        :show-overflow-tooltip="true"
                        label="请求头">
                </el-table-column>
                <el-table-column
                        prop="contentType"
                        width="140"
                        :show-overflow-tooltip="true"
                        label="ContentType">
                </el-table-column>
                <el-table-column
                        prop="path"
                        :show-overflow-tooltip="true"
                        label="请求路径">
                </el-table-column>
                <el-table-column
                        prop="toolName"
                        width="160"
                        :show-overflow-tooltip="true"
                        label="工具名称">
                </el-table-column>
                <el-table-column
                        prop="description"
                        :show-overflow-tooltip="true"
                        label="工具描述">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="140">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="showToolFunction(scope.row)"
                                type="text">
                            <strong style="color: blue" >查看函数</strong>
                        </el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button
                                @click.native.prevent="deleteWebHookToolEvent(scope.row)"
                                type="text">
                            <strong style="color: red" >删除</strong>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="查看工具函数"
                   :close-on-click-modal="false"
                   width="70%"
                   :visible.sync="dialog.function.visible">
            <el-input
                type="textarea"
                :rows="20"
                v-model="dialog.function.functionJson"
                resize="none"
                :readonly="true"/>
        </el-dialog>

        <el-dialog title="导入工具"
                   width="40%"
                   :close-on-click-modal="false"
                   :visible.sync="dialog.importTools.visible">
            <div style="display: flex; justify-content: end;">
                <el-button
                    icon="el-icon-download"
                    type="text"
                    @click="downloadTemplate">
                    下载模板
                </el-button>
            </div>
            <el-upload
                    name="file"
                    drag
                    :action="uploadURL"
                    :show-file-list="false"
                    :on-error="uploadFileError"
                    :on-success="uploadFileSuccess">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
    import tools from "@/util/Tools";

    export default {
        name: "webhook",
        data() {
            return {
                table: {
                    tools: []
                },
                dialog: {
                    function: {
                        visible: false,
                        functionJson: ""
                    },
                    importTools: {
                        visible: false,
                    }
                }
            }
        },
        methods: {
            findWebHookTools() {
                tools.get("/tool/webhook/findAll").then(response => {
                    this.table.tools = response.dataList;
                })
            },

            showToolFunction(webhookTool) {
                this.dialog.function.visible = true;
                this.dialog.function.functionJson = JSON.stringify(
                    JSON.parse(webhookTool.function),
                    null,
                    2
                );
            },

            uploadFileError(response) {
                this.$message.error({
                    message: "上传文件失败",
                });
            },

            uploadFileSuccess(response) {
                if (response.code == 0) {
                    this.$message.success({
                        message: "上传文件成功",
                    });
                    this.dialog.importTools.visible = false;
                    this.findWebHookTools();
                } else {
                    this.$message.error({
                        title: "上传文件失败",
                        message: response.msg
                    });
                }
            },

            deleteWebHookToolEvent(webhookTool) {
                this.$confirm("是否删除工具", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    tools.delete("/tool/webhook/delete", {id: webhookTool.id}).then(response => {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        });
                        // 重新查询列表
                        this.findWebHookTools();
                    })
                }).catch(() => {
                });
            },

            downloadTemplate() {
                window.open(tools.requestURL("/tool/webhook/download/template"));
            }
        },
        computed: {
            uploadURL() {
                return tools.requestURL("/tool/webhook/imports");
            }
        },
        mounted() {
            this.findWebHookTools();
        }
    }
</script>

<style scoped>
    ::v-deep .el-textarea__inner {
        background: black;
        color: white;
    }
    ::v-deep .el-upload {
        width: 100%;
    }
    ::v-deep .el-upload-dragger {
        width: 100%;
    }
</style>
